<template>
	<view>
		<!-- 标题&筛选 -->
		<view class="title flex justify-center">
			<view class="title-box flex justify-between align-center">
				<view class="title-box-l">
					详细数据展示
				</view>
				<view class="title-box-r flex align-center" @click="show = true">
					<image src="../static/data.png" mode=""></image>
					<span>{{time==''?tadaytime:time}}</span>
					<u-icon name="arrow-down" color="#0E0E0E" size="28"></u-icon>
				</view>
			</view>
		</view>
		<!-- 派单金额 -->
		<view class="list flex justify-center">
			<view class="list-box">
				<view class="list-box-title flex align-center">
					<span></span>
					<text>服务派单金额</text>
				</view>
				<view class="list-box-c flex justify-between">
					<view class="list-box-c-l">
						<view class="list-box-c-l-num">
							{{serviceMoney.serviceMoney}}<span>元</span>
						</view>
						<view class="list-box-c-l-text">
							总收入派单金额
						</view>
					</view>
					<view class="list-box-c-r">
						<view class="list-box-c-r-num">
							{{refundMoney.serviceRefundMoney}}<span>元</span>
						</view>
						<view class="list-box-c-r-text">
							退款金额
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list flex justify-center">
			<view class="list-box">
				<view class="list-box-title flex align-center">
					<span></span>
					<text>任务服务派单金额</text>
				</view>
				<view class="list-box-c flex justify-between">
					<view class="list-box-c-l">
						<view class="list-box-c-l-num">
							{{serviceMoney.helpMoney}}<span>元</span>
						</view>
						<view class="list-box-c-l-text">
							总收入派单金额
						</view>
					</view>
					<view class="list-box-c-r">
						<view class="list-box-c-r-num">
							{{refundMoney.helpRefundMoney}}<span>元</span>
						</view>
						<view class="list-box-c-r-text">
							退款金额
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 派单统计 -->
		<view class="list flex justify-center">
			<view class="list-box">
				<view class="list-box-title flex align-center">
					<span></span>
					<text>服务派单统计</text>
				</view>
				<view class="list-box-c flex justify-between">
					<view class="list-box-c-l">
						<view class="list-box-c-l-num">
							{{serviceCount.serviceCounts}}<span>件</span>
						</view>
						<view class="list-box-c-l-text">
							总派单数
						</view>
					</view>
					<view class="list-box-c-r">
						<view class="list-box-c-r-num">
							{{refundCount.serviceRefundCount}}<span>件</span>
						</view>
						<view class="list-box-c-r-text">
							退款派单
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list flex justify-center">
			<view class="list-box">
				<view class="list-box-title flex align-center">
					<span></span>
					<text>任务派单统计</text>
				</view>
				<view class="list-box-c flex justify-between">
					<view class="list-box-c-l">
						<view class="list-box-c-l-num">
							{{serviceCount.helpCounts}}<span>件</span>
						</view>
						<view class="list-box-c-l-text">
							总派单数
						</view>
					</view>
					<view class="list-box-c-r">
						<view class="list-box-c-r-num">
							{{refundCount.helpRefundCount}}<span>件</span>
						</view>
						<view class="list-box-c-r-text">
							退款派单
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 时间选择器 -->
		<u-picker v-model="show" :params="params" mode="time" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				time: '',
				tadaytime: new Date().toISOString().slice(0, 10),
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				
				serviceCount: [], // 派单数量
				serviceMoney: [], // 派单金额
				refundCount: [], //退款数量|
				refundMoney: [], // 退款金额
				companyId:'',
				byuserId:'',
				isTrue:''
			}
		},
		onLoad(option) {
			if(option.companyId){
				this.isTrue =1
				this.companyId = option.companyId
				this.getorder()
			}
			if(option.userId){
				this.isTrue =2
				this.byuserId = option.userId
				this.getorder()
			}
			
			
		},
		onShow() {

		},
		methods: {
			// 选择日期
			confirm(e) {
				this.time = e.year + '-' + e.month + '-' + e.day
			},
			getorder() {
				// console.log(this.isTrue,'this.isTruethis.isTruethis.isTruethis.isTrue')
				let data 
				if(this.isTrue==2){
					data= {
						time: this.time,
						userId:this.byuserId
					}
				}else if(this.isTrue==1){
					 data = {
						time: this.time,
						companyId:this.companyId
					}
				}
				this.$Request.get("/app/orders/selectStaffUserStatisticsByTime", data).then(res => {
					if (res.code == 0) {
						this.serviceCount=res.data.serviceCount
						this.serviceMoney=res.data.serviceMoney
						this.refundCount=res.data.refundCount
						this.refundMoney=res.data.refundMoney
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F5F5;
	}

	.title {
		width: 100%;
		height: 36rpx;
		margin-top: 32rpx;

		.title-box {
			width: 686rpx;
			height: 100%;

			.title-box-l {
				color: #1A1A1A;
				font-size: 32rpx;
				font-weight: bold;
			}

			.title-box-r {
				image {
					width: 40rpx;
					height: 36rpx;
				}

				span {
					margin-left: 10rpx;
					margin-right: 10rpx;
					color: #0E0E0E;
					font-size: 28rpx;
				}
			}
		}
	}

	.list {
		width: 100%;
		height: 230rpx;
		margin-top: 24rpx;

		.list-box {
			width: 686rpx;
			height: 100%;
			background-color: #ffffff;
			border-radius: 16rpx;

			.list-box-title {
				margin-top: 30rpx;

				span {
					display: inline-block;
					width: 6rpx;
					height: 28rpx;
					margin-left: 30rpx;
					margin-right: 10rpx;
					background-color: #FE3B27;
				}

				text {
					color: #333333;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.list-box-c {
				width: 100%;
				margin-top: 20rpx;

				.list-box-c-l {
					width: 50%;
					margin-left: 40rpx;

					.list-box-c-l-num {
						color: #333333;
						font-size: 50rpx;
						font-weight: 500;

						span {
							font-size: 28rpx;
							margin-left: 10rpx;
						}
					}

					.list-box-c-l-text {
						color: #333333;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 10rpx;
					}
				}

				.list-box-c-r {
					width: 50%;
					margin-left: 40rpx;

					.list-box-c-r-num {
						color: #333333;
						font-size: 50rpx;
						font-weight: 500;

						span {
							font-size: 28rpx;
							margin-left: 10rpx;
						}
					}

					.list-box-c-r-text {
						color: #333333;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>
